<template>
<div>
  <el-upload 
  list-type="picture-card" 
  :http-request='upload' 
  :before-upload = 'beforeUpload' 
  :on-change='changeFile' 
  :class="{disabled : fileComputed}" 
  :file-list = 'fileList' 
  :limit="1" action='#' 
  :on-preview='preview' 
  :on-remove = 'handleRemove'>
     <i class="el-icon-plus" />
  </el-upload>
  <!-- 进度条 -->
  <el-progress v-if="showPercent" :percentage='percent' style="width:180px"/>
  <!-- 弹层显示预览 -->
    <el-dialog title="图片预览" :visible.sync="showDialog">
      <img :src="imgUrl" style="width:100%" alt="">
   </el-dialog>
</div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
const cos = new COS({
  SecretId: 'AKIDb6KIzPYQ1OVLvFI3YooXyA5LPFp9D1at',
  SecretKey: '5uTlmW0DpEOJyNWQ4ScXCbkeIgogJflc'
})
export default {
  data () {
    return {
      fileList:[],
      showDialog: false,
      imgUrl : '',
      currentFileUid :null, //记录当前正在上传的uid
      percent: 0, //记录当前百分比
      showPercent: false, //显示进度条
    }
  },
  methods: {
  // 点击预览事件 +
    preview(file){
    console.log(file);
      this.imgUrl = file.url
      this.showDialog = true
    },
    // 删除事件
    handleRemove(file, fileList){
    // file是点击要删除的文件
    // fileList删除过后的文件
      // console.log(file);
      // console.log(fileList);
      // console.log(this.fileList);
      // 方法一
      this.fileList = fileList 
      // 方法二
      // this.fileList = this.fileList.filter(item => item.uid !== file.uid) //filter方法把符合条件的元素重新放入一个新数组返回，这里条件是把item.uid ！== file.uid的元素筛选出来，放到一个新数组里面，这样点击删除的图片，就被排除出去了，新的数组里面就没有该元素了
    },
    // 添加图片
    // 移除fileList里面的图片之后，点击＋号，弹出文件夹，选择图片，然后把图片添加到fileList里面，展示在页面上
    changeFile(file,fileList){
    // console.log(123);
      // 这个方法执行了两次 第一次是添加文件，第二次是上传成功或者上传失败（这三种情况都会被调用）
      // file是当前文件， fileList是当前的最新数组
      console.log(file);
      console.log(fileList);
      // console.log(this.fileList );
      // 因为现在还没有上传，所以第二次进来的数据一定是为空的，等完成了上传腾讯云之后就会成功，返回的fileList的长度就不会是0
      // 如果完成上传动作了 第一次进入和第二次进入的fileList的长度应该都是1，应该都有数据，这里把第二次的数组fileList给到了this.fileList
      //  方法一
       this.fileList = fileList
      //  方法二
      //  this.fileList = fileList.map(item => item)
      // 方法三 因为这个方法执行几次所以这里要进行if判断，不然会重复添加file
     /*  if(!this.fileList.some(item => item.uid === file.uid)){
        this.fileList.push(file)
      } */
      // this.fileList.push(file)
      // 上传成功数据才能进来 要上传到腾讯云cos
   },
  //  上传之前的检查（检查文件大小和后缀名） 如果不满足条件 返回false上传就会暂停 如果满足条件就返回true
    beforeUpload(file){
        // file 文件的详细信息大小和后缀名都有
        const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
        if(!types.some(item => file.type === item)){
             this.$message.error('上传图片只能是 JPG、GIF、BMP、PNG 格式!')
             return false
        }
         //  检查大小 5M 1M = 1024KB 1KB = 1024B
        const maxSize = 5 * 1024 * 1024
        if (maxSize < file.size) {
          this.$message.error('图片大小最大不能超过5M')
          return false
        }
        //已经确定当前上传的就是当前的这个file了
        // console.log(file);
        this.currentFileUid = file.uid
        this.showPercent = true
        return true
    },
    // 进行上传操作
    upload(params){
    // params 基本信息 我们只需要用到里面的file上传的文件信息
      //  console.log(params.file)
      // params.file如果这个文件存在执行上传操作
       if(params.file){
          // 执行上传操作
          cos.putObject({
            Bucket: 'm-1313884926', // 存储桶
            Region: 'ap-nanjing', // 地域
            Key: params.file.name, // 文件名
            Body: params.file, // 要上传的文件对象
            StorageClass: 'STANDARD', // 上传的模式类型 直接默认 标准模式即可
            onProgress:(params) => {
              // console.log(params) 返回的params里面有percent百分比，是图片上传的进度条的百分比
              this.percent = params.percent * 100

            }
            // 上传到腾讯云 =》 哪个存储桶 哪个地域的存储桶 文件  格式  名称 回调
          },(err, data) =>{
          // data返回数据之后 应该如何处理
          console.log(err || data)
            if(!err && data.statusCode === 200){
            // 此时说明文件上传成功  要获取成功的返回地址
            // fileList才能显示到上传组件上 此时我们要将fileList中的数据的url地址变成 现在上传成功的地址
            // 目前虽然是一张图片 但是请注意 我们的fileList是一个数组
            // 需要知道当前上传成功的是哪一张图片
           this.fileList = this.fileList.map(item => {
              // console.log(item);
              
              // 去找谁的uid等于刚刚记录下来的id
              if (item.uid === this.currentFileUid) {
                // 将成功的地址赋值给原来的url属性
                return { url: 'http://' + data.Location, upload: true }
                // upload 为true 表示这张图片已经上传完毕 这个属性要为我们后期应用的时候做标记
                // 保存  => 图片有大有小 => 上传速度有快又慢 =>要根据有没有upload这个标记来决定是否去保存
              }
              // console.log(this.fileList);
              return item

            })
            // 如果图片太小了的话，百分比太快了看不见，所以让关闭进度条延迟执行，用定时器
            setTimeout(()=>{
               // 关闭进度条
              this.showPercent = false
              // 重置百分比
              this.percent = 0 
            },2000)
           
            // 将上传成功的地址 回写到了fileList中 fileList变化  =》 upload组件 就会根据fileList的变化而去渲染视图
            }
        })
       }
    
    }
  },
  computed: {
     // 设定一个计算属性 判断是否已经上传完了一张
    fileComputed() {
      return this.fileList.length === 1
    }
  }
}
</script>

<style>
.disabled .el-upload--picture-card {
  display: none
}
</style>